<script setup lang="ts">
import BlockItem from '@/components/BlockItem/BlockItem.vue'

withDefaults(
  defineProps<Partial<{
    data: { name: string, unit: string, value: string }[]
  }>>(),
  {
    data: () => [],
  },
)
</script>

<template>
  <BlockItem class="energy-structure-analysis" title="行业能耗结构分析">
    <div class="d-flex align-items-center justify-content-center">
      <div class="position-relative structure-box">
        <div v-for="(item, index) in data" :key="index" class="item" :class="`item-${index + 1}`">
          <span class="label">{{ item.name }}<small v-show="false">（item.unit）</small></span><strong class="value">{{ item.value }}</strong>
        </div>
        <img class="item-img" src="./center.png" alt="center">
      </div>
    </div>
  </BlockItem>
</template>

<style lang="scss" scoped>
.structure-box {
  --ratio: 0.8;

  width: calc(18.85vw * var(--ratio));
  height: calc(18.38vw * var(--ratio));
  background-repeat: no-repeat;
  background-image: url('./bg.png');
  background-size: 100%;
  background-position: center;
}
.item {
  width: calc(10.52vw * var(--ratio) * 1.2);
  height: calc(2.29vw * var(--ratio) * 1.2);
  background: url('./button.png') no-repeat -30px center;
  background-size: 100% 100%;
  position: absolute;
  padding-left: 42px;
  padding-top: 2px;
}
.item > * {
  display: block;
}
.label {
  color: rgba(98, 164, 226, 1);
  font-size: 12px;
}
.label > small {
  display: none;
}
.value {
  color: #ffffff;
  font-style: italic;
  font-size: 14px;
}
.item-img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--ratio));
}

$pos:
  1 -37 39,
  2 -72 138,
  3 -25 241,
  4 222 40,
  5 245 134,
  6 212 241;
@each $index, $left, $top in $pos {
  .item-#{$index} {
    left: calc(#{$left}px * var(--ratio));
    top: calc(#{$top}px * var(--ratio));
  }
}
</style>
